<template>
	<view class="indexsearch-page">
		<view class="index-content-header" :style="{ 'background-image' : 'url('+ indexsearch +')' }">
			<view class="content-header-nav" :style="bgColor?`background-color:${bgColor}`:''">
				<view class="content-header-nav-top" :style="gps?`height:${gps+'px'}`:``"></view>
				<view class="content-header-nav-bottom">
					<view class="content-body-left" style="">
						<div class="arrow-left"> <u-icon name="arrow-left" size="19" @click="goshang"></u-icon></div>
						<u-line direction="column" :hairline="false" length="16" margin="0 1px"></u-line>
						<div class="arrow-left" @click="goindex"> <u-icon name="home-fill" size="20"></u-icon></div>
					</view>
					<img :src="queryIconImage('logo1')" alt="" class="header-right-img" />
				</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="indexsearch-content">
			<!-- 搜索框 -->
			<view class="indexsearch-content-search">
				<u-input :placeholder="(sortname=='问题')?'搜索关键字/答主/钢琴相关问题':'搜索用户名字'" border="none" suffixIcon="search"
					suffixIconStyle="font-size:60rpx !important;color:#999999" v-model="searchval" @confirm="searchbtn">
					<template #prefix>
						<view class="page-sort-box" :class="sortbleam?'page-sort-box-active':''">
							<span @click="sortswitch">{{sortname}}</span>
							<img :src="queryIconImage('indexsearch2')" alt="" style="width: 24rpx;
height: 12rpx; margin: 0 10rpx;">
							<view class="sort-box-list" v-if="sortbleam" @click="changesort('问题')">
								问题 </view>
							<view class="sort-box-list" v-if="sortbleam" @click="changesort('用户')">
								用户 </view>
						</view>
						<view class="clickseaacrh" @click="searchbtn">

						</view>
					</template>
				</u-input>
			</view>
			<!--搜索问题内容部分  -->
			<view class="indexsearch-content-body" v-if="problemblean&&sortname=='问题'">
				<view class="content-body-top" v-if="historylist.length>0">
					<div class="body-top-ledt"></div>
					<span class="body-top-text">历史记录</span>
					<span @click="clearhistory">清空记录</span>
				</view>
				<view class="content-body-history">
					<view class="body-history-list" v-for="(item,index) in historylist" :key="index"
						@click="clickhistory(item)">
						<span>{{item.text}}</span>
					</view>

				</view>
				<view class="content-body-bottom">
					<div class="body-bottom-ledt"></div>
					<span class="body-bottom-text">猜你想搜</span>
				</view>
				<view class="body-bottom-title">
					<view class="bottom-title-list" v-for="(item,index) in wantlist" :key="index"
						@click="cilickwanr(item)">
						<span>{{item.text}}</span>
					</view>
				</view>
			</view>
			<!-- 搜索内容为空的情况 -->
			<view class="indexsearch-content-empty" v-if="!problemblean&&sortname=='问题'&&questionslist.length<1">
				<view class="content-empty-body">
					<span>暂时没有找到相关内容</span>
					<img mode="aspectFill" :src="queryIconImage('indexsearch3')" alt="" class="empty-body-img">
				</view>
			</view>
			<view class="indexsearch-content-empty" v-if="!problemblean&&sortname=='用户'&&userlist.length<1">
				<view class="content-empty-body">
					<span>暂时没有找到相关内容</span>
					<img mode="aspectFill" :src="queryIconImage('indexsearch3')" alt="" class="empty-body-img">
				</view>
			</view>
			<!-- 搜索内容有的情况Ian -->
			<view class="indexsearch-content-have" v-if="!problemblean&&questionslist.length>0&&sortname=='问题'">
				<view class="content-have-span">
					<span>一下问题的描述中包含<span style="color: #F09500;">「{{this.havetoptitle}}」</span>的内容</span>
				</view>
				<view class="content-have-list" v-for="(item,index) in questionslist" :key="item.id"
					@click="goquestindetal(item.id)">
					<view class="have-list-tile">
						<span>{{item.title}}</span>
					</view>
					<view class="have-list-content" v-if="item.content">
						<span>{{item.content}}</span>
					</view>
					<view class="have-list-video" v-if="item.article_detail.length>0&&!item.content">
						<view class="list-videos" v-for="(v,i) in item.article_detail" :key="v.id">
							<video :src="v.video?.url" style="width: 100%; height: 300rpx; margin: 28rpx 0 ;"
								v-if="v.video?.url" @click.stop></video>
						</view>

					</view>
					<view class="have-list-collect">
						<img :src="queryIconImage('questiondetalogo5')" alt="" class="imgs">
						<span>{{item?.article_comment?.length}}</span>
					</view>
				</view>

			</view>
			<!-- 搜索内容有的情况usere -->
			<view class="indexsearch-content-haveuser" v-if="!problemblean&&userlist.length>0&&sortname=='用户'">
				<view class="content-haveuser-span">
					<span>一下问题的描述中包含<span style="color: #F09500;">「{{this.userhavetoptitle}}」</span>的内容</span>
				</view>
				<view class="content-haveuser-list" v-for="(item,index) in userlist " :key="item.id"
					@click="goanswerdetails(item.id)">
					<img :src="item.avatar?.url?item.avatar?.url:queryImage('modelone1')" alt=""
						class="haveuser-list-leftimg">
					<view class="haveuser-list-right">
						<view class="list-right-left">
							<view class="list-right-lefttop">
								<span>{{item?.nickname}}</span>
								<view class="lefttop-right">
									<img :src="queryIconImage('logo1')" alt="" class="lefttop-right-img">
									<span>认证答主</span>
								</view>
							</view>
							<span>{{item?.user_fans?.length}}粉丝&nbsp;|&nbsp;{{item?.article_comments?.length}}回答</span>
						</view>
						<view class="list-right-btn" @click.stop="goquestion(item)">
							<span>提问</span>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import methods from "@/pages/index/methods.js"
	import methodsJS from "@/pages/home/methods.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				userlist: [],
				questionslist: [],
				userhavetoptitle: '',
				havetoptitle: '',
				problemblean: true,
				searchcontentval: [],
				searchuserval: [],
				wantlist: [],
				historylist: [],
				sortbleam: false,
				sortname: '问题',
				searchval: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				gps: '',
				indexsearch: ''
			};
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		mounted() {
			this.querySections().then(res=>{
				this.indexsearch = this.queryIconImage(`indexsearch1`)
			})
			this.querySectionsIcon()
		},
		onLoad: function(option) {
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			// console.log("胶囊位置信息", option?.type);
			if (option?.type == 'user') {
				this.sortname = '用户'
			}
			this.guessSearchList()
			this.getHistoryList()
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		methods: {
			...methods,
			...methodsJS,
			queryImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			goanswerdetails(id) {
				uni.navigateTo({
					url: `/pages_a/answerdetails/answerdetails?id=${id}`
				})
			},
			goquestion(val) {
				this.stri = JSON.stringify(val)
				// console.log("接收的数据", this.stri);
				getApp().val = this.stri
				uni.switchTab({
					url: `/pages/question/question`
				})
			},
			goquestindetal(id) {
				uni.navigateTo({
					url: `/pages_a/questiondetails/questiondetails?id=${id}`
				})
			},
			getsearchval() {

			},
			usersearchval() {},
			goshang() {
				uni.navigateBack({ delta: 1 });
			},
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			selsectchange(e) {
				console.log("e:", e);
			},
			sortswitch() {
				this.sortbleam = this.sortbleam ? false : true
			},
			changesort(val) {
				this.sortbleam = false
				this.sortname = val
				this.searchval = ''
				this.havetoptitle = ''
				this.userhavetoptitle = ''
				if (val == '问题') {
					this.problemblean = true
				} else {
					this.problemblean = true
					this.searchuserval = []
				}
			},
			searchbtn() {
				if (this.searchval && this.sortname == '问题') {
					if (this.historylist.length < 5) {
						let arr = {
							text: this.searchval
						}
						this.historylist.unshift(arr)
					} else {
						this.historylist.pop()
						let arr = {
							text: this.searchval
						}
						this.historylist.unshift(arr)
					}
					this.problemblean = false
					this.$store.dispatch("remote/query", {
						model: "article",
						where: {
							_and: [{
								title: {
									_like: `%${this.searchval}%`
								}
							}, {
								answer_type: {
									_eq: '公开参与'
								}
							}]
						},
						field_string: 'id user_user type title content price_cny created_at answer_type status article_comment{id title} user{id nickname avatar{url}} article_detail{id video{url} img{url}}',
					}).then(res => {
						this.questionslist = JSON.parse(JSON.stringify(res.data_list))
					})
					this.havetoptitle = this.searchval
				} else if (this.searchval && this.sortname == '用户') {
					this.problemblean = false
					this.userhavetoptitle = this.searchval
					this.$store.dispatch("remote/query", {
						model: "user",
						where: {
							_and: [{
								nickname: {
									_like: `%${this.searchval}%`
								}
							}, {
								is_answer: {
									_eq: "已通过"
								}
							}]
						},
						field_string: 'id nickname avatar{url} profile attach_data is_answer article_comments{id} user_fans{id user_user user_fans_user}',
					}).then(res => {
						this.userlist = JSON.parse(JSON.stringify(res.data_list))
					})
				} else {
					this.searchcontentval = []
				}
			},
			/* 点击历史记录时 */
			clickhistory(val) {
				this.addSearchArticle(val.text)
				this.searchval = val.text
				this.searchbtn()
			},
			cilickwanr(val) {
				this.addSearchArticle(val.text)
				this.searchval = val.text
				this.searchbtn()
			},
			addSearchArticle(val){
				this.$store.dispatch("remote/query", {
					model: "search_article",
					where: {
						user_user: {
							_eq: uni.getStorageSync('userInfo').id
						},
						title: {
							_eq: val
						}
					}
				}).then(res=>{
					if(!res?.data_list?.length){
						this.$store.dispatch("remote/mutation", {
							operation: "insert_search_article",
							objects: [{
								user_user: uni.getStorageSync('userInfo').id||1,
								title: val,
								type: this.sortname
							}],
						}).then(res => {
							console.log("添加成功");
						}).catch(err=>{
							console.log("添加失败");
						})
					}else{
						this.$store.dispatch("remote/mutation", {
							operation: "update_search_article",
							where: {
								id: {
									_eq: res?.data_list[0]?.id
								}
							},
							_set: {
								title: val,
							},
						}).then(res => {
							console.log("更改成功");
						}).catch(err=>{
							console.log("更改失败");
						})
					}
				})
			},
			/* 清空历史记录 */
			clearhistory() {
				this.historylist = []
				this.$store.dispatch("remote/mutation", {
					operation: "delete_search_article",
					where: {
						user_user: {
							_eq: uni.getStorageSync('userInfo').id||1
						}
					},
				}).then(res => {
					console.log("删除成功");
				}).catch(err=>{
					console.log("删除失败");
				})
			},
			// 历史记录
			getHistoryList() {
				this.$store.dispatch("remote/query",{
					model: "search_article",
					where: {
						user_user: {
							_eq: uni.getStorageSync('userInfo').id||1
						}
					},
					order_by: {
						updated_at: "desc"
					},
					field_string: "id title"
				}).then(res=>{
					res?.data_list?.map(item=>{
						this.historylist.push({
							text: item.title
						})
					})
					this.historylist = this.historylist.slice(0,5)
				})
			},
			// 猜你想搜
			guessSearchList() {
				this.$store.dispatch("remote/query",{
					model: "article",
					where: {
						answer_type: {
							_eq: '公开参与'
						}
					},
					order_by: {
						created_at: "desc"
					},
					field_string: "id title"
				}).then(res=>{
					res?.data_list?.map(item=>{
						this.wantlist.push({
							text: item.title
						})
					})
					this.wantlist = this.wantlist.slice(0,7)
				})
			},
		}
	}
</script>

<style lang="scss">
	.indexsearch-page {
		width: 100% !important;
		height: 100vh;
		background-color: #F4F4F4;

		.index-content-header {
			width: 100%;
			height: 343rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: 50%, 50%;
			position: relative;

			.content-header-nav {
				width: 100%;
				height: 170rpx;
				background-color: rgba(247, 247, 247, 0);
				// padding-left: 30rpx;
				position: fixed;
				z-index: 999989;

				//top: 80rpx;
				// height: var(--status-bar-height);
				.content-header-nav-bottom {
					width: 100%;
					height: 32px;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					position: absolute;

					.content-body-left {
						width: 160rpx;
						height: 60rpx;
						display: flex;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 32rpx;
						opacity: 1;
						border: 1rpx solid rgba(0, 0, 0, 0.2);
						align-items: center;

						.arrow-left {
							width: 49%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}


					.header-right-img {
						width: 135rpx;
						height: 64rpx;
						position: fixed;
						left: 50%;
						transform: translateX(-50%);
					}
				}

			}
		}

		/* 内容部分 */
		.indexsearch-content {
			width: 100%;
			// height: 100%;
			margin-top: -160rpx;
			background-color: #F4F4F4;
			box-sizing: border-box;
			padding: 0 27rpx;

			/* 搜索框 */
			.indexsearch-content-search {
				width: 100%;
				height: 70rpx;
				margin-bottom: 58rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				// overflow: hidden;
				box-sizing: border-box;
				padding: 0 15rpx 0 120rpx;
				border: 1rpx solid rgba(0, 0, 0, 0.1);
				position: relative;
				display: flex;
				align-items: center;

				.u-input__content__field-wrapper__field.data-v-df79975b {
					font-size: 24rpx !important;
					font-weight: 500 !important;
					color: #999999 !important;
					line-height: 35rpx !important;
				}

				.page-sort-box-active {
					border-radius: 10rpx;
					border: 1rpx solid #CCCCCC;
					background-color: #fff;
				}

				.clickseaacrh {
					width: 60rpx;
					height: 100%;
					position: absolute;
					right: 15rpx;
					top: 0;
					z-index: 9999;
					// background-color: red;
				}

				.page-sort-box {
					display: inline-block;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #666666;
					line-height: 30rpx;
					padding: 3rpx 5rpx;
					padding-left: 10rpx;
					z-index: 999;
					position: absolute;
					top: 25%;
					border-right: 3rpx solid #ccc;
					left: 15rpx;


					.sort-box-img {
						width: 32rpx;
						height: 30rpx;
						vertical-align: top;
					}

					.sort-box-list {
						margin-left: 20rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 500;
						color: #999999;
						line-height: 50rpx;
						margin: 0 10rpx;
					}
				}
			}

			/* 内容部分 */
			.indexsearch-content-body {
				width: 100%;
				height: 100%;

				.content-body-top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					position: relative;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #567895;
					line-height: 40rpx;

					.body-top-ledt {
						width: 6rpx;
						height: 35rpx;
						background: #FDB727;
						border-radius: 5rpx 5rpx 5rpx 5rpx;
						position: absolute;
						left: 0;
						top: 0;
						opacity: 1;
					}

					.body-top-text {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #4A4A4A;
						line-height: 40rpx;
						margin-left: 17rpx;
					}
				}

				.content-body-history {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.body-history-list {
						margin-right: 20rpx;
						background: #FFFFFF;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						opacity: 1;
						border: 1rpx solid #FFE6B8;
						padding: 10rpx 26rpx 15rpx 26rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #4A4A4A;
						line-height: 35rpx;
						margin-bottom: 20rpx;
					}

				}

				.content-body-bottom {
					width: 100%;
					display: flex;
					margin-top: 20rpx;

					.body-bottom-ledt {
						width: 6rpx;
						height: 35rpx;
						background: #FDB727;
						border-radius: 5rpx 5rpx 5rpx 5rpx;


					}

					.body-bottom-text {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #4A4A4A;
						line-height: 40rpx;
						margin-left: 11rpx;
					}
				}

				.body-bottom-title {
					width: 100%;

					.bottom-title-list {
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 500;
						color: #646464;
						line-height: 42rpx;
						margin-top: 30rpx;
					}
				}
			}

			/* 搜索内容为空的情况 */
			.indexsearch-content-empty {
				width: 100%;
				// height: 100%;

				.content-empty-body {
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #4A4A4A;
					line-height: 42rpx;
					width: 340rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 0 auto;
					margin-top: 350rpx;

					.empty-body-img {
						width: 360rpx;
						height: 240rpx;
						margin-top: 50rpx;
					}
				}
			}

			/* 搜索内容有的问题 */
			.indexsearch-content-have {
				width: 100%;

				.content-have-span {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #567895;
					line-height: 35rpx;
				}

				.content-have-list {
					width: 100%;
					background: #FFFFFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					box-sizing: border-box;
					padding: 20rpx 20rpx 22rpx 20rpx;
					margin-top: 25rpx;

					.have-list-tile {
						width: 100%;
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 500;
						color: #4A4A4A;
						line-height: 42rpx;
					}

					.have-list-content {
						width: 100%;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						line-height: 42rpx;
						display: inline-block;
						margin: 18rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}

					.have-list-collect {
						height: 45rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						line-height: 45rpx;
						display: flex;
						align-items: center;

						.imgs {
							width: 40rpx;
							height: 40rpx;
							margin-right: 6rpx;
						}
					}
				}
			}

			.indexsearch-content-haveuser {
				width: 100%;

				.content-haveuser-span {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #567895;
					line-height: 35rpx;
				}

				.content-haveuser-list {
					margin-top: 25rpx;
					width: 100%;
					height: 150rpx;
					background: #FFFFFF;
					border-radius: 15rpx;
					box-sizing: border-box;
					padding: 20rpx 20rpx 30rpx 30rpx;
					display: flex;
					justify-content: space-between;

					.haveuser-list-leftimg {
						width: 100rpx;
						height: 100rpx;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						opacity: 1;
						border: 1rpx solid #CCCCCC;
						margin-right: 14rpx;
					}

					.haveuser-list-right {
						display: flex;
						flex: 1;
						justify-content: space-between;
						align-items: center;

						.list-right-btn {
							width: 160rpx;
							height: 60rpx;
							background: #F09500;
							border-radius: 50rpx 50rpx 50rpx 50rpx;
							text-align: center;
							font-size: 30rpx;
							font-family: Source Han Sans CN-Bold, Source Han Sans CN;
							font-weight: 700;
							color: #FFFFFF;
							line-height: 60rpx;
						}

						.list-right-left {
							display: flex;
							width: 60%;
							height: 100%;
							flex-direction: column;
							justify-content: space-between;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #5F5F5F;
							line-height: 35rpx;

							.list-right-lefttop {
								display: flex;
								width: 100%;
								justify-content: space-between;
								align-items: center;
								font-size: 32rpx;
								font-family: Source Han Sans CN-Bold, Source Han Sans CN;
								font-weight: 700;
								color: #3D3D3D;
								line-height: 42rpx;

								.lefttop-right {
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #567895;
									line-height: 35rpx;
									display: flex;
									align-items: center;

									.lefttop-right-img {
										width: 30rpx;
										height: 30rpx;
										margin-right: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>